<template>
	<view>
		<view class="order-item" v-for="(item, index) in dataList" :key="index" @click="clickDetail(item)">
			<view class="title-box">
				<view class="title">
					<image class="store-img" :src="baseImgUrl + 'images_store.png'" mode="aspectFill" />
					{{ item.storeName }}
				</view>
				<view class="status">{{ statusConfig[item.orderStatus].text }}</view>
			</view>
			<view class="goods-box">
				<view class="goods-item" v-for="(gItem, gIndex) in item.fxOrderItemList" :key="gIndex">
					<view class="left-img">
						<image class="goods-img" :src="baseUrl + gItem.goodImg" mode="aspectFill" />
					</view>
					<view class="goods-content">
						<view class="goods-name">{{ gItem.goodName }}</view>
						<view class="num-box">
							<view class="number">X{{ gItem.goodCount }}</view>
							<view class="price"><text class="icon">￥</text>{{gItem.goodCount * gItem.goodPrice }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="createTime">
				<view class="contents">
					<text>下单时间：</text>
					<text>{{ item.createTime }}</text>
				</view>
				<view class="contents">
					<text>总价：</text>
					<text class="price"><text class="icon">￥</text>{{ item.payMoney}}</text>
				</view>
			</view>
			<view class="btn-box">
				<view v-if="item.orderStatus == 1" :style="{'margin-top': item.orderStatus == 1?'30rpx':'0'}"
					class="btn-item" @click.stop="clickRefund(item)">{{fatherVal}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseIconUrl,
		baseImgUrl
	} from '@/config'

	export default {
		name: 'OrderListComponent',
		data() {
			return {
				baseUrl,
				baseIconUrl,
				baseImgUrl,
				dataList: [],
				statusConfig: {
					1: {
						text: '待发货'
					},
					2: {
						text: '配送中'
					},
					3: {
						text: '待收货'
					},
					4: {
						text: '已完成'
					},
					5: {
						text: '已退单'
					}
				}
			}
		},
		props: {
			fatherVal: {
				type: String,
				default: '退款'
			},
			orderList: {
				type: Array,
				default: []
			}
		},
		watch: {
			orderList: {
				handler(newVal, oldVal) {
					this.dataList = uni.$u.deepClone(newVal)
				},
				deep: true
			}
		},
		// computed: {
		// 	pricesum() {
		// 		return function(data) {
		// 			return data.reduce((sum, item) => sum + item.goodCount * item.goodPrice, 0)
		// 		}
		// 	}
		// },
		created() {
			this.dataList = uni.$u.deepClone(this.orderList)
		},

		methods: {
			clickDetail(item) {
				uni.navigateTo({
					url: `/subPages/order/orderDetail?id=${item.id}`
				})
			},
			clickRefund(item) {
				this.$emit('refund', item)
			}
		},
	}
</script>
<style lang="scss" scoped>
	.order-item {
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 12rpx;
		background-color: #FFF;

		.title-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.price {
				font-size: 26rpx;
				color: #EB2727;

				.icon {
					font-size: 20rpx;
				}
			}

			.title {
				display: flex;
				align-items: center;

				.store-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
					border-radius: 20rpx;
				}
			}
		}

		.goods-box {
			.goods-item {
				display: flex;
				padding-bottom: 10rpx;

				.left-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 14rpx;
					border-radius: 8rpx;
					overflow: hidden;
					background-color: #cfd2ca;

					.goods-img {
						width: 100%;
						height: 100%;
					}
				}

				.goods-content {
					flex: 1;

					.goods-name {
						font-size: 28rpx;
					}

					.num-box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 8rpx;
						font-size: 24rpx;

						.price {
							font-size: 26rpx;
							color: #EB2727;

							.icon {
								font-size: 20rpx;
							}
						}
					}
				}
			}
		}

		.createTime {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 30rpx;
			border-top: 2rpx solid #f2f2f2;

			.contents {
				display: flex;
				justify-content: space-between;
				line-height: 38rpx;

				.price {
					font-size: 26rpx;
					color: #EB2727;

					.icon {
						font-size: 20rpx;
					}
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn-item {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 180rpx;
				height: 64rpx;
				border: 2rpx solid #126352;
				border-radius: 32rpx;
				font-size: 28rpx;
				color: #126352;
				margin-left: 10rpx;
			}
		}
	}
</style>